<template>
  <div class="wrapper">
      熊猫
      <hr>
      {{userLocation}} 
      <hr>
      {{userGeolocation}}
  </div>
</template>

<script>
export default {
    name: 'Panda' 
}
</script>

<script setup>
import { onBeforeMount , onMounted } from 'vue' ;
import { inject , defineExpose } from 'vue';

// 组件生命周期钩子: beforeMount
onBeforeMount( () => {
    console.log( '- - - before mount - - -' );
});

// 组件生命周期钩子: mounted
onMounted( () => {
    console.log( '- - - mounted - - -' );
});

const userLocation = inject( 'location' , 'The Universe' );
const userGeolocation = inject( 'geolocation' );

defineExpose({
    userLocation,
    userGeolocation
});

</script>

<style scoped>
.wrapper {
    margin: 15px ;
    border: 1px solid green ;
    padding: 10px ;
}
</style>